<template>
  <div class="flowSimilar">
    <div class="hide" @mouseover="mouseOver" v-show="smallShow">相似推荐</div>
     <!-- animate__animated animate__fadeInRight -->
    <div class="extend" v-show="isShow" >
      <div class="extend_head">
          <div class="extend_head_title">相似推荐</div>
          <div class="extend_head_close" @click="getClose">
            <i class="el-icon-close"></i>
          </div>
      </div>
      <div class="extend_table">
          <div class="extend_table_tableItem" v-for="(item, index) in tableData" :key="index">
              <div>{{item.name}}</div>
              <div class="extend_table_tableItem_itemRight">{{item.num}}</div>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getSimilarEntity } from '@/api/public'
export default {
  data() {
    return {
      neoids: [],
      category: '',
      isShow: false,
      smallShow: true,
      tableData: []
    }
  },
  mounted() {
    this.isShow = false
    this.smallShow = true
  },
  computed: {
    showStyle() {
      return {
        height: this.isShow ? '700px' : '40px',
        width: this.isShow ? 'auto' : '40px'
      }
    }
  },
  methods: {
    // 当关闭图表的时候清除推荐列表的数据，并恢复默认数据值
    clear() {
      this.isShow = false
      this.smallShow = true
      this.tableData = []
    },
    // 获取前一个界面传来的数据
    get(query) {
      let category = query.category
      let neoids = query.neoids
      neoids = neoids.split(',')
      this.neoids = neoids
      this.category = category
      if (category) {
        this.getSimilar()
      }
    },
    // 请求推荐数据
    getSimilar() {
      const param = new URLSearchParams()
      param.append('category', this.category)
      param.append('neoids', JSON.stringify(this.neoids))
      getSimilarEntity(param).then((res) => {
        let key
        this.tableData = []
        for (key in res) {
          this.tableData.push({
            name: res[key][0] || '',
            num: res[key][1] || ''
          })
        }
        // this.isShow = true
      })
    },
    // 关闭推荐浮窗
    getClose() {
      this.isShow = false
      this.smallShow = true
    },
    // 鼠标hover弹窗出现
    mouseOver() {
      this.isShow = true
      this.smallShow = false
    }
  }
}
</script>
<style lang="scss"  scoped>
// .animate__animated .animate__fadeInRight {
//   --animate-duration: 1s;
//   --animate-delay: 0.1s;
// }
// :root {
//   --animate-duration: 20ms;
//   --animate-delay: 0.1s;
// }
.hide{
  position: absolute;
  z-index: 999;
  width: 30px;
  height: 140px;
  line-height: 35px;
  text-align: center;
  overflow: hidden;
  border: 1px solid #ccc;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  background-color: #fff;
  top: 150px;
  right: 0;
  /* display: none; */
  overflow: auto;
}
.extend{
  position: absolute;
  z-index: 999;
  width: 20%;
  height: 73%;
  border: 1px solid #ccc;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  background-color: #fff;
  top: 80px;
  right: 0;
  overflow: auto;
  &_head{
    /* text-align: center; */
    display: grid;
    grid-template-columns: 98% 2%;
    padding: 10px 20px;
    border-bottom: 3px solid #ccc;
    &_title{
      font-size: 20px;
    }
    &_close{
      font-size: 20px;
      cursor: pointer;
    }
  }
  &_table{
    &_tableItem{
      display: grid;
      grid-template-columns: auto auto;
      padding: 16px 5px;
      &+.extend_table_tableItem {
        border-top:1px solid #ddd;
      }
      &_itemRight{
        text-align: right;
        margin-left: 10px;
        padding-right: 10px;
      }
    }
  }
}
</style>
